<template>
  <div class="wrapper">
    <div class="header">
      <span>大数据可视化平台</span>
    </div>
    <div class="main">
      <section class="item span1 flex-center-align">
        <dv-border-box-13 :color="['#409EFF', '#409EFF']"
                          :reverse="true">
          <tao-charts :data="option.quanChart"
                      @chart-click="handleClick" />
        </dv-border-box-13>
        <dv-border-box-13 :color="['#409EFF', '#409EFF']"
                          :reverse="true">
          <tao-charts :data="option.pieChart" />
        </dv-border-box-13>
      </section>
      <section class="item span2">
        <div class="title">
          <article class="box">
            <p>累计发布数</p>
            <p><span class="num">901.00</span>条</p>
            <p>今日最新发布<span class="num">12</span>条</p>
          </article>
          <article class="box">
            <p>累计交易金额</p>
            <p><span class="num">901.00</span>亿</p>
            <p>今日最新交易<span class="num">12</span>亿</p>
          </article>
          <article class="box">
            <p>累计交易面积</p>
            <p><span class="num">2137.26</span>万亩</p>
            <p>今日交易面积<span class="num">1.5</span>万亩</p>
          </article>
        </div>
        <tao-charts :data="option.mapCharts" />
      </section>
      <section class="item span3 flex-center-align">
        <dv-border-box-13 :color="['#409EFF', '#409EFF']"
                          :reverse="true">
          <tao-charts :data="option.lineChart" />
        </dv-border-box-13>
        <dv-border-box-13 :color="['#409EFF', '#409EFF']"
                          :reverse="true">
          <tao-charts :data="option.lineChart2" />
        </dv-border-box-13>
      </section>
    </div>
  </div>
</template>

<script>
import { reactive, getCurrentInstance } from "vue"
import JsonData from "./data.json"
import chartConfig from "./echarts"

export default {
  setup() {
    const { ctx } = getCurrentInstance()
    console.log(ctx.$echarts, "echarts")
    // 指定图表的配置项和数据
    const dataset1 = [
      ["product", "本地总面积", "本地已流转面积"],
      ["岳阳市", 43.3, 85.8],
      ["益阳市", 83.1, 73.4],
      ["长沙市", 86.4, 65.2],
      ["株洲市", 72.4, 53.9],
      ["衡阳市", 72.4, 53.9],
      ["永州市", 72.4, 53.9],
      ["娄底市", 72.4, 53.9],
      ["郴州市", 72.4, 53.9],
      ["湘潭市", 72.4, 53.9]
    ]
    const dataset2 = [
      ["product", "土地流转信息", "找地需求信息"],
      ["岳阳市", 43.3, 85.8],
      ["益阳市", 83.1, 73.4],
      ["长沙市", 86.4, 65.2],
      ["株洲市", 72.4, 53.9],
      ["衡阳市", 72.4, 53.9],
      ["永州市", 72.4, 53.9],
      ["娄底市", 10.4, 200.9],
      ["郴州市", 72.4, 90.9],
      ["湘潭市", 20.4, 300.9]
    ]
    const dataset3 = [
      ["违法犯罪人员分析", "数值"],
      ["卖淫嫖娼", 43.3],
      ["经侦嫌疑", 83.1],
      ["重点人口", 86.4],
      ["刑贞重点", 72.4],
      ["吸毒人口", 72.4]
    ]
    const option = reactive(
      {
        lineChart: chartConfig.lineChart(dataset1),
        lineChart2: chartConfig.lineChart(dataset2),
        pieChart: chartConfig.pieChart(dataset3),
        mapCharts: chartConfig.mapCharts(JsonData),
        quanChart: chartConfig.quanChart()
      }
    )
    const handleClick = (params) => {
      console.log(params, "获得事件参数")
    }
    return { option, handleClick }
  }
}
</script>
<style lang="scss" scoped>
$num-text-size: 0.44rem;
.wrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: url("~@/assets/images/bg.jpg") no-repeat 0 0 / 100% 100%;
  background-size: cover;
  color: #4adefe;
  font-size: 0.18rem;
  .header {
    height: 20vh;
  }
  .main {
    height: auto;
    display: flex;
    .item {
      height: 80vh;
      display: flex;
    }
    .span1 {
      width: 30vw;
    }
    .span2 {
      flex: 1;
      display: flex;
      flex-direction: column;
      .title {
        height: 20vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .box {
          flex: 1;
          .num {
            color: #f3db5c;
            font-size: $num-text-size;
          }
        }
      }
    }
    .span3 {
      width: 30vw;
    }
  }
}
.flex-center-align {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  .title {
    color: #7fff00;
    font-weight: bold;
    margin-left: 0.4rem;
  }
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.44rem;
  color: #cdddf7;
  font-weight: 900;
  letter-spacing: 5px;
}
.animate-rate {
  width: 6rem;
  height: 6rem;
  position: fixed;
  margin: 0 auto;
  top: 25vh;
  left: 35%;
}
</style>
